$(function () {
    $("#jqGrid").jqGrid({
        url: '/platform/manage/card/list',
        datatype: "json",
        colModel: [
            { label: 'cardId', name: 'cardId', index: 'cardId', width: 50, key: true ,hidden:true},
            { label: '银行名称', name: 'cardBankName', index: 'cardBankName', width: 50 },
            { label: '信用卡描述', name: 'cardDesc', index: 'cardDesc', width: 80 },
            { label: '排序', name: 'cardIndex', index: 'cardIndex', width: 50 },
            { label: '状态', name: 'cardStatus', index: 'cardStatus', width: 50,formatter:function (r) {
                return r == 1 ? '<label class="label label-success">正常</label>':'<label class="label label-danger">下架</label>';
            } },
            { label: '申请链接', name: 'cardUrl', index: 'cardUrl', width: 80 },
            { label: 'banner', name: 'cardBanner', index: 'cardBanner', width: 80},
            { label: 'cardDiscount', name: 'cardDiscount', index: 'cardDiscount', width: 80,hidden:true }
        ],
        viewrecords: true,
        height: 385,
        rowNum: 10,
        rowList : [10,30,50],
        rownumbers: true,
        rownumWidth: 25,
        autowidth:true,
        multiselect: true,
        pager: "#jqGridPager",
        jsonReader : {
            root: "result.list",
            page: "result.currPage",
            total: "result.totalPage",
            records: "result.totalCount"
        },
        prmNames : {
            page:"page",
            rows:"limit",
            order: "order"
        },
        gridComplete:function(){
            //隐藏grid底部滚动条\
            $("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" });
        }
    });

    $("#photoImage").click(function () {
        $("#photo").click();
    });

    $("#photo").change(function () {
        var objUrl = getObjectURL(this.files[0]); //获取图片的路径，该路径不是图片在本地的路径
        if (objUrl != null) {
            $("#photoImage").attr("src", objUrl);
            vm.card.cardBanner = objUrl;
        }
    });
});

function getObjectURL(file) {
    var url = null;
    // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
    if (window.createObjectURL != undefined) { // basic
        url = window.createObjectURL(file);
    } else if (window.URL != undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
    }
    return url;
}

var vm = new Vue({
    el:"#app",
    data:{
        showList:true,
        card:{cardStatus:0},
        title:""
    },
    methods:{
        add:function () {
            vm.title = "新增信息";
            vm.showList = false;
            vm.card = {cardStatus:0};
        },
        del:function () {
            var ids = getSelectedRows();
            if (ids.length > 1){
                alert("不允许进行批量操作")
                return;
            }
            window.confirm("确定要删除此条信息么？",function () {
                $.ajax({
                    url:"/platform/manage/card/delete/"+getSelectedRow(),
                    dataType:"JSON",
                    success:function (result) {
                        if (result.code == 200){
                            alert("操作成功",function () {
                                vm.reload();
                            })
                        }else {
                            alert(result.message);
                        }
                    },
                    error:function (e) {
                        console.log("error",e);
                        alert("请求失败");
                    }
                })
            })
        },
        update:function () {
            var rowid = $("#jqGrid").getGridParam("selrow");
            var rowData = $("#jqGrid").getRowData(rowid);
            vm.card = rowData;
            if (rowData.cardStatus.indexOf("正常") != -1)
                vm.card['cardStatus'] = 1;
            else
                vm.card['cardStatus'] = 2;
            vm.showList = false;
            vm.title = "修改信息";
        },
        saveOrUpdate:function () {
            var urlStr = vm.card.cardId == null ? "/platform/manage/card/save":"/platform/manage/card/update";
            Vue.delete(this.card,'cardBanner');
            $.ajaxFileUpload({
                url: urlStr,
                data: JSON.parse(JSON.stringify(vm.card)),
                type: "POST",
                contentType: "multipart/form-data",
                secureuri: false,
                fileElementId: 'photo',
                dataType: 'json',
                success: function (result) {
                    if (result.code == 200) {
                        vm.reload();
                        alert("操作成功");
                    } else {
                        alert(result.message);
                        if (vm.card.cardId == null) {
                            $("#photoImage").attr("src", "");
                        }
                    }
                },
                complete: function () {
                    $("#photo").replaceWith('<input type="file" style="display: none;" accept="image/*" name="cardBanner" id="photo" class="form-control" placeholder="file" />');
                    $("#photo").change(function () {
                        var objUrl = getObjectURL(this.files[0]); //获取图片的路径，该路径不是图片在本地的路径
                        if (objUrl != null) {
                            $("#photoImage").attr("src", objUrl);
                            vm.card.cardBanner = objUrl;
                        }
                    });
                },
                error: function (r,xml,states,e) {
                    console.log("error", e);
                    alert("请求失败，请重试");
                }
            });
        },
        reload:function () {
            vm.showList = true;
            vm.title = "";
            $("#jqGrid").jqGrid().trigger("reloadGrid");
        }
    }
});
